<template>
	<view class="margic o-h" :style="{
		margin:`${co.marginTop}${u} ${co.marginLR}${u} ${co.marginBottom}${u}`,
		borderRadius: co.circle + u,
	}">
		<!-- 1 -->
		<view v-if="co.type == 1" class="f-row">
			<view class="bf margi1 f-1 b-re" v-if="i < 2" v-for="(v, i) in co.imgList1" :key="i" :style="{marginRight: i!=1?co.shifting + u:'' }">
				<mg-img v-if="v.img" :src="v.img"></mg-img>
			</view>
		</view>
		<view v-else-if="co.type == 2" class="f-row">
			<view class="bf margi2 f-1 b-re" v-if="i < 3" v-for="(v, i) in co.imgList1" :key="i" :style="{marginRight: i!=2?co.shifting + u:'' }">
				<mg-img v-if="v.img" :src="v.img"></mg-img>
			</view>
		</view>
		<view v-else-if="co.type == 3" class="f-row">
			<view class="bf margi3 f-1 b-re" v-if="i==0" v-for="(v, i) in co.imgList1" :key="i" :style="{marginRight: i!=2?co.shifting + u:'' }">
				<mg-img v-if="v.img" :src="v.img"></mg-img>
			</view>
			<view class="f-1 f-col">
				<view class="bf margi2 f-1 b-be" v-if="i>0" v-for="(v, i) in co.imgList1" :key="i" :style="{marginBottom: i!=2?co.shifting + u:'' }">
					<mg-img v-if="v.img" :src="v.img"></mg-img>
				</view>
			</view>
		</view>
		<view v-else-if="co.type == 4" class="">
			<view class="bf margi1 b-be" v-if="i==0" v-for="(v, i) in co.imgList1" :key="i" :style="{marginBottom: i!=2?co.shifting + u:'' }">
				<mg-img v-if="v.img" :src="v.img"></mg-img>
			</view>
			<view class="f-row">
				<view class="bf margi1 f-1 b-re" v-if="i>0" v-for="(v, i) in co.imgList1" :key="i" :style="{marginRight: i!=2?co.shifting + u:'' }">
					<mg-img v-if="v.img" :src="v.img"></mg-img>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'margic',
		props: {
			co: {
				type: Object,
				default: function() {
					return {}
				}
			},
			u: {
				type: String,
				default: 'px'
			},
		},
		data() {
			return {};
		},
		mounted() {},
		methods: {},
		created() {
			console.log(this.co)
		}
	};
</script>
<style lang="scss" scoped>
	.margic {

		.margi1 {
			height: 360rpx;
		}

		.margi2 {
			height: 250rpx;
		}

		.margi3 {
			height: 720rpx;
		}
	}
</style>
